<template>
  <div class="lsc-order-base">
    <van-nav-bar title="订单信息"/>
    <van-tabs :active="active">
      <van-tab v-for="(title, index) in title" :title="title" :key="index" >
        <!-- 订单基础信息 -->
        <div class="lsc-order-base-box" v-if="index===0">
          <van-panel title="订单号" :desc="scanBasicInfo.orderno" >
            <van-row class="lsc-order-base-list">
              <van-col offset="1" span="23">联系人：{{scanBasicInfo.contact_man || ''}}</van-col>
              <van-col offset="1" span="23">下单日期：{{scanBasicInfo.createtime}}</van-col>
              <van-col offset="1" span="23">联系电话：{{scanBasicInfo.contact_tel}}</van-col>
              <van-col offset="1" span="23">联系地址：{{scanBasicInfo.contact_addr}}</van-col>
            </van-row>
            <div class="lsc-order-base-info-box">
              <van-collapse v-model="activeNames" accordion>
                <van-collapse-item 
                v-for="(item,index) in scanOrderDetail.prt_items"
                :key="index"
                :title="item.model_no" 
                :name="index">
                  <van-row class="lsc-order-base-info">
                    <van-col span="12">数量：{{item.qty}}</van-col>
                    <van-col span="12">货架：{{item.shelf_name}}</van-col>
                    <van-col span="12">成品宽：{{item.prt_width}}</van-col>
                    <van-col span="12">成品高：{{item.prt_height}}</van-col>
                    <van-col span="12">褶数(倍)：{{item.zheshu}}</van-col>
                    <van-col span="12">用布量：{{item.actual_use}}</van-col>
                    <van-col span="12">对/单开：{{item.opentype}}</van-col>
                    <van-col span="12">打孔/捏褶：{{item.dakong}}</van-col>
                    <van-col 
                      span="12" 
                      v-for="(other, indx) in item.items"
                      :key="indx">
                      {{other.attribute}}：{{other.val}}
                    </van-col>
                    <van-col span="24">备注：{{item.remark}} </van-col>
                  </van-row>
                </van-collapse-item>
              </van-collapse>
              
            </div>
          </van-panel>
          <van-panel title="订单处理">
            <van-cell-group>
              <div @click="showStore=true">
                <van-field
                  :value="orderbase.store"
                  label="分配仓库"
                  disabled
                  @click-icon="showStore=true"
                >
                  <van-icon slot="icon" name="arrow"/>
                </van-field>
              </div>
              <van-field
                :value="orderbase.status"
                label="当前状态"
                disabled
              />
              <div  v-if="isCancleOrder">
                <van-field
                  :value="orderbase.opStatus"
                  label="处理状态"
                  disabled
                >
                  <!-- <van-icon slot="icon" name="arrow"/> -->
                </van-field>
                
              </div>
              <div @click="showMade=true"  v-if="showChild">
                <van-field
                  label="制作过程"
                  disabled
                  @click-icon="showMade=true"
                >
                  <van-icon slot="icon" name="arrow"/>
                </van-field>
              </div>
              
              
            </van-cell-group>
          </van-panel>
          <van-row v-if="isCancleOrder">
            <van-col span="12">
              <van-button @click="onSaveOrder" bottom-action>保存</van-button>
            </van-col>
            <van-col span="12">
              <van-button type="primary"  @click="onCancleOrder" bottom-action>取消</van-button>
            </van-col>
          </van-row>
          <van-popup v-model="showMade" style="width:100%;height:100%;">
            <div>
              <van-field
                :value="orderbase.childStatus"
                label="当前流程"
                disabled
              >
              </van-field>
            </div>
            <div @click="showNotify=true" >
              <van-field
                :value="orderbase.nextNotify"
                label="下一步流程"
                disabled
                @click-icon="showNotify=true"
              >
                <van-icon slot="icon" name="arrow"/>
              </van-field>
              
            </div>
            <van-row style="margin-top: 40px;">
              <van-col span="12">
                <van-button @click="onSaveNotify" bottom-action>确定</van-button>
              </van-col>
              <van-col span="12">
                <van-button type="primary"  @click="showMade=false" bottom-action>取消</van-button>
              </van-col>
            </van-row>
          </van-popup>
        </div>
        <!-- 订单处理日志 -->
        <div class="lsc-order-base-box" v-else>
          <van-panel title="订单号" :desc="scanBasicInfo.orderno" >
            <van-row class="lsc-order-base-list">
              <van-col offset="1" span="23">下单日期：{{scanBasicInfo.createtime}}</van-col>
              <van-col offset="1" span="23">当前处理时长：{{scanBasicInfo.handle_length}}</van-col>
            </van-row>
            <div class="lsc-order-base-info-box">
              <van-steps direction="vertical" :active="0" active-color="#f60">
                <van-step v-for="(item,index) in scanOrderDetail.log_items" :key="index">
                  <h3>{{item.remark}}【{{item.user_name}}】</h3>
                  <p>{{item.createtime}}</p>
                </van-step>
              </van-steps>
            </div>
          </van-panel>
        </div>
      </van-tab>
    </van-tabs>
    <van-actionsheet v-model="showStore" :actions="actionsStore" />
    <van-actionsheet v-model="showStatus" :actions="actionsStatus" />
    <!-- <van-actionsheet v-model="showChildStatus" :actions="actionsChildStatus" /> -->
    <van-actionsheet v-model="showNotify" :actions="actionsNotify" />
    
    <div class="lsc-loading" v-if="isLoading">
      <div class="lsc-loading-mask"></div>
      <van-loading color="black" />
    </div>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from 'vuex'

export default {
  name: 'orderbase',
  computed: {
    ...mapGetters({
      isLoading: 'getLoading'
    })
  },
  data () {
    return {
      active: 0,
      activeNames: ['0'],
      title: ['订单基础信息','订单处理日志'],
      isCancleOrder: true,
      scanBasicInfo: {},
      scanOrderDetail: {},
      showMade: false,
      showStore: false,
      actionsStore: [],
      showStatus: false,
      actionsStatus: [],
      acStatus: [
        {
          id: 0,
          name: '未审核',
          callback: this.onClickStatus
        },
        {
          id: 1,
          name: '已审核',
          callback: this.onClickStatus
        },
        {
          id: 2,
          name: '已下料',
          callback: this.onClickStatus
        },
        {
          id: 3,
          name: '已报价',
          callback: this.onClickStatus
        },
        {
          id: 4,
          name: '取消',
          callback: this.onClickStatus
        },
        {
          id: 6,
          name: '已发货',
          callback: this.onClickStatus
        },
        {
          id: 7,
          name: '已打印',
          callback: this.onClickStatus
        }
      ],
      showChild: false,
      showChildStatus: false,
      actionsChildStatus: [
        {
          id: 201,
          name: '量高',
          callback: this.onClickChildStatus
        },
        {
          id: 202,
          name: '制作',
          callback: this.onClickChildStatus
        },
        {
          id: 203,
          name: '扣环',
          callback: this.onClickChildStatus
        },
        {
          id: 204,
          name: '质检',
          callback: this.onClickChildStatus
        },
        {
          id: 205,
          name: '打孔',
          callback: this.onClickChildStatus
        }
      ],
      showNotify: false,
      actionsNotify: [
        {
          id: 201,
          name: '量高',
          callback: this.onClickNotify
        },
        {
          id: 202,
          name: '制作',
          callback: this.onClickNotify
        },
        {
          id: 203,
          name: '扣环',
          callback: this.onClickNotify
        },
        {
          id: 204,
          name: '质检',
          callback: this.onClickNotify
        },
        {
          id: 205,
          name: '打孔',
          callback: this.onClickNotify
        }
      ],
      orderbase: {
        store: '',
        opStatus: '',
        status: '',
        childStatus: '',
        nextNotify: '',
        notifyStatus: ''
      },
      saveOrder: {
        orderid: 0,
        warestore_id: 0,
        warestore_remark: '',
        op_status: 0,
        op_child_status: 0
      }
    }
  },
  created() {
    let scanId = this.$route.query.id
    this.getScanOrderDetail(scanId)
    this.getWarestores()
  },
  methods: {
    getScanOrderDetail(id) {

      this.$store.dispatch('fetchLoading', true)
      this.axios.get(api.qsSys.scanOrderDetail, {params: {id: id}})
        .then((res) => {
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.$store.dispatch('fetchLoading', false)
            this.scanOrderDetail = res.data.data || []
            this.scanBasicInfo = this.scanOrderDetail.basic_info
            this.orderbase.store = this.scanBasicInfo.warestore_name
            this.orderbase.opStatus = this.scanBasicInfo.usable_op_status.length ? this.scanBasicInfo.usable_op_status[0].name : ''

            this.saveOrder.orderid = this.scanBasicInfo.orderid
            this.saveOrder.warestore_id = this.scanBasicInfo.warestore_id
            this.saveOrder.warestore_remark = this.scanBasicInfo.warestore_name
            this.saveOrder.op_status =this.scanBasicInfo.usable_op_status.length ? this.scanBasicInfo.usable_op_status[0].id : ''
            this.saveOrder.op_child_status = this.scanBasicInfo.sub_status
            
            this.getStatusVal(this.scanBasicInfo.op_status, this.scanBasicInfo.sub_status, this.scanBasicInfo.usable_op_status)
          }
        })
    },
    getWarestores() {
      this.axios.get(api.qsSys.warestores)
        .then((res) => {
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            // this.warestores = res.data.data
            this.onOrgnazation(res.data.data)
          }
        })
    },
    onOrgnazation(warestores) {
      let _this = this
      this.actionsStore = warestores
      warestores.forEach((element,index)=>{
        this.actionsStore[index].callback = _this.onClickStore
      })
    },
    getStatusVal(status, childStatus, actionsStatus) {
      // 子状态初始化
      if(status == 2 || status == 3) {
        this.showChild = true
        if(childStatus) {

          let cStatusName = this.actionsChildStatus.filter(c=>{
            if(childStatus == c.id) {
              return c
            }
          })
          this.orderbase.childStatus = cStatusName[0].name
        }
      }
      // 当前状态初始化
      let statusName = this.acStatus.filter(t=>{
        if(status == t.id) {
          return t
        }
      })
      this.orderbase.status = statusName[0].name

      // 处理状态初始化
      if(!actionsStatus.length)
        this.isCancleOrder = false
      let _this = this
      this.actionsStatus = actionsStatus
      this.actionsStatus.forEach((arr)=>{
        arr.callback = _this.onClickStatus
      })
    },
    onSaveNotify() {
      // 保存下一步流程
      this.$toast.loading({
        duration: 0,
        message: '保存中...'
      });
      this.axios.post(api.qsSys.confirmNotify, {orderid: this.saveOrder.orderid, sub_status: this.orderbase.notifyStatus})
        .then(res=>{
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.$toast.clear()
            // this.saveOrder.op_child_status = this.orderbase.childStatus
            this.showMade = false
            this.getScanOrderDetail(this.saveOrder.orderid)
          }
        })
    },
    onClickStore(item) {
      let warestore_name = this.scanBasicInfo.warestore_name
      let warestore_id = this.scanBasicInfo.warestore_id
      this.showStore = false
      this.orderbase.store = item.name
      this.saveOrder.warestore_id =  (warestore_id == item.id) ? warestore_id : item.id
      this.saveOrder.warestore_remark = (warestore_name == item.name) ? item.name : `${warestore_name}调整为${item.name}`
    },
    onClickStatus(item) {
      this.showStatus = false
      this.orderbase.opStatus = item.name
      this.saveOrder.op_status = item.id
      if(item.id == '2' || item.id == '3') {
        this.showChild = true
      }else {
        this.showChild = false
        this.saveOrder.op_child_status = 0
      }
    },
    onClickChildStatus(item) {
      this.showChildStatus = false
      this.orderbase.childStatus = item.name
      this.saveOrder.op_child_status = item.id
      
    },
    onClickNotify(item) {
      this.showNotify = false
      this.orderbase.nextNotify = item.name
      this.orderbase.notifyStatus = item.id
      
    },
    onCancleOrder() {
      this.$toast.loading({
          duration: 0,
          message: '取消中...'
        });
        this.axios.post(api.qsSys.cancelOrder, {orderid: this.saveOrder.orderid})
          .then(res=>{
            if (res.data.retcode != 0) {
              this.$toast.fail(res.data.retmsg);
            }else {
              this.$toast.clear()
              this.isCancleOrder = false
              this.getScanOrderDetail(this.saveOrder.orderid)
            }
          })
    },
    onSaveOrder() {
      // if(!this.saveOrder.op_child_status && this.showChild) {
      //   return this.$toast('请添加子状态')
      // }
      console.log(this.saveOrder)
      // return
      this.$toast.loading({
          duration: 0,
          message: '保存中...'
        });
        this.axios.post(api.qsSys.handleOrder, this.saveOrder)
          .then(res=>{
            if (res.data.retcode != 0) {
              this.$toast.fail(res.data.retmsg);
            }else {
              this.$toast.clear()
              this.getScanOrderDetail(this.saveOrder.orderid)
            }
          })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.lsc-order-base .lsc-order-base-box {
  margin-top: 5px;
  margin-bottom: 10px;
}
.lsc-order-base .lsc-order-base-info {
  position: relative;
}
.lsc-order-base .lsc-order-base-list {
  position: relative;
  padding: 10px 0;
  background: #fcfcdb;
}

.lsc-order-base .lsc-order-base-list>div {
  padding-bottom: 5px;
}
.lsc-order-base .lsc-order-base-info>div {
  padding-bottom: 15px;
}
.lsc-order-base .van-card__row {
  margin-top: 8px;
}
.lsc-order-base .lsc-order-base-info-box {
  border-top: 8px solid #f2f2f2;
}
.lsc-order-base .van-panel.van-hairline--top-bottom {
  margin-bottom: 10px;
}
.lsc-order-base .van-collapse-item__content {
  background-color: #eef0f6;
}
</style>
